<template>
    <div class="user-detail-container">
        <el-page-header title="返回会员列表" @back="goBack" />

        <div v-if="loading" class="loading-container">
            <el-skeleton animated :rows="10" />
        </div>

        <template v-else>
            <!-- 用户基本信息 -->
            <el-card shadow="hover" class="detail-card">
                <template #header>
                    <div class="card-header">
                        <span>会员基本信息</span>
                    </div>
                </template>

                <div class="user-profile">
                    <div class="user-avatar">
                        <el-avatar :size="100" :src="logo" />
                    </div>

                    <div class="user-info">
                        <h2>{{ userInfo.nickname || userInfo.username }}</h2>
                        <el-tag :type="getMemberLevelType(userInfo.memberLevel)" class="level-tag">
                            {{ userInfo.memberLevel }}
                        </el-tag>
                        <div class="user-meta">
                            <p><strong>用户名：</strong>{{ userInfo.username }}</p>
                            <p><strong>邮箱：</strong>{{ userInfo.email }}</p>
                            <p><strong>手机：</strong>{{ userInfo.phone }}</p>
                            <p><strong>注册时间：</strong>{{ userInfo.createTime }}</p>
                            <p><strong>最后登录：</strong>{{ userInfo.lastLoginTime }}</p>
                            <p>
                                <strong>状态：</strong>
                                <el-tag :type="userInfo.status === 1 ? 'success' : 'danger'">
                                    {{ userInfo.status === 1 ? '启用' : '禁用' }}
                                </el-tag>
                            </p>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 用户钱包信息 -->
            <el-row :gutter="20" class="wallet-row">
                <el-col :span="6">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-content">
                            <div class="stat-icon money-icon">¥</div>
                            <div class="stat-value">{{ userInfo.wallet?.balance || 0 }}</div>
                            <div class="stat-label">余额</div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-content">
                            <div class="stat-icon points-icon">P</div>
                            <div class="stat-value">{{ userInfo.wallet?.points || 0 }}</div>
                            <div class="stat-label">积分</div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-content">
                            <div class="stat-icon coupon-icon">C</div>
                            <div class="stat-value">{{ userInfo.wallet?.couponCount || 0 }}</div>
                            <div class="stat-label">优惠券</div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="6">
                    <el-card shadow="hover" class="stat-card">
                        <div class="stat-content">
                            <div class="stat-icon gift-icon">G</div>
                            <div class="stat-value">{{ userInfo.wallet?.giftcardCount || 0 }}</div>
                            <div class="stat-label">礼品卡</div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <!-- 用户订单信息 -->
            <el-card shadow="hover" class="detail-card">
                <template #header>
                    <div class="card-header">
                        <span>最近订单</span>
                    </div>
                </template>

                <el-table :data="orderList" border style="width: 100%" v-loading="ordersLoading">
                    <el-table-column prop="id" label="订单号" width="100" />
                    <el-table-column prop="totalPrice" label="金额" width="100">
                        <template #default="scope">
                            ¥{{ scope.row.totalPrice }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template #default="scope">
                            <el-tag :type="getOrderStatusType(scope.row.status)">
                                {{ scope.row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="下单时间" width="180" />
                    <el-table-column prop="payType" label="支付方式" width="100" />
                </el-table>

                <div v-if="orderList.length === 0 && !ordersLoading" class="empty-data">
                    <el-empty description="暂无订单数据" />
                </div>
            </el-card>

            <!-- 用户收货地址 -->
            <el-card shadow="hover" class="detail-card">
                <template #header>
                    <div class="card-header">
                        <span>收货地址</span>
                    </div>
                </template>

                <div v-loading="addressesLoading">
                    <div v-if="addressList.length > 0" class="address-list">
                        <el-descriptions v-for="(address, index) in addressList" :key="index"
                            :title="address.isDefault === 1 ? '默认地址' : `地址 ${index + 1}`" :column="1" border
                            class="address-item">
                            <el-descriptions-item label="收货人">{{ address.name }}</el-descriptions-item>
                            <el-descriptions-item label="手机号">{{ address.phone }}</el-descriptions-item>
                            <el-descriptions-item label="详细地址">{{ getFullAddress(address) }}</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <div v-else class="empty-data">
                        <el-empty description="暂无地址数据" />
                    </div>
                </div>
            </el-card>
        </template>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getUserDetail } from '../../api/user'
import logo from '../../assets/images/logo.png'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const ordersLoading = ref(false)
const addressesLoading = ref(false)
const userInfo = ref({})
const orderList = ref([])
const addressList = ref([])

// 获取会员等级对应的Tag类型
const getMemberLevelType = (level) => {
    switch (level) {
        case '钻石会员':
            return 'danger'
        case '金卡会员':
            return 'warning'
        case '银卡会员':
            return 'success'
        default:
            return 'info'
    }
}

// 获取订单状态对应的Tag类型
const getOrderStatusType = (status) => {
    switch (status) {
        case '已完成':
            return 'success'
        case '待发货':
            return 'warning'
        case '待收货':
            return 'info'
        case '待支付':
            return 'danger'
        case '已取消':
            return ''
        default:
            return 'info'
    }
}

// 获取完整地址
const getFullAddress = (address) => {
    return `${address.province} ${address.city} ${address.area} ${address.detail}`
}

// 获取用户详情
const getDetail = async (id) => {
    loading.value = true
    try {
        const res = await getUserDetail(id)
        if (res.code === 200 && res.data) {
            userInfo.value = res.data
            orderList.value = res.data.orders || []
            addressList.value = res.data.addresses || []
        } else {
            ElMessage.error('获取用户信息失败')
            goBack()
        }
    } catch (error) {
        console.error('获取用户详情失败:', error)
        ElMessage.error('获取用户详情失败')
        goBack()
    } finally {
        loading.value = false
    }
}

// 返回列表页
const goBack = () => {
    router.push('/user/list')
}

// 初始化
onMounted(() => {
    const userId = route.params.id
    if (userId) {
        getDetail(userId)
    } else {
        ElMessage.error('用户ID不存在')
        goBack()
    }
})
</script>

<style scoped>
.user-detail-container {
    padding: 20px;
}

.loading-container {
    margin-top: 20px;
}

.detail-card {
    margin-top: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-profile {
    display: flex;
    align-items: flex-start;
}

.user-avatar {
    margin-right: 30px;
}

.user-info {
    flex: 1;
}

.user-meta {
    margin-top: 20px;
}

.user-meta p {
    margin: 8px 0;
}

.level-tag {
    margin-left: 10px;
}

.wallet-row {
    margin-top: 20px;
}

.stat-card {
    text-align: center;
}

.stat-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.money-icon {
    background-color: #67C23A;
}

.points-icon {
    background-color: #E6A23C;
}

.coupon-icon {
    background-color: #409EFF;
}

.gift-icon {
    background-color: #F56C6C;
}

.stat-value {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    color: #909399;
}

.address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.address-item {
    margin-bottom: 20px;
}

.empty-data {
    padding: 30px 0;
    display: flex;
    justify-content: center;
}
</style>